<template>
  <div class="PerTrain">
    <div class="PerTrain-head">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>员工培训</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="PerTrain-neck">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-input
            v-model="searchText"
            placeholder="请输入员工姓名"
            prefix-icon="el-icon-search"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getAllMv(1)"
            ><i class="el-icon-search"></i>搜索</el-button
          >
        </el-col>
        <el-col :span="4"
          ><el-button type="primary" @click="PerTrainAddDialog = true"
            ><i class="el-icon-plus"></i>增加</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="PerTrain-main">
      <template>
        <el-table :data="employeetrain" style="width: 100%">
          <el-table-column width="60" type="selection" />
          <el-table-column label="员工编号" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.row.eid }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="180" align="center">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.employee.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="培训日期" width="140" align="center">
            <template slot-scope="scope">
              {{ scope.row.trainDate }}
            </template>
          </el-table-column>

          <el-table-column label="培训内容" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.trainContent }}
            </template>
          </el-table-column>

          <el-table-column label="备注" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-popconfirm
                confirmButtonText="确定"
                cancelButtonText="不用了"
                icon="el-icon-info"
                iconColor="red"
                title="这条记录确定删除吗？"
                confirmButtonType="danger"
                @onConfirm="handleDelete(scope.$index, scope.row)"
              >
                <el-button size="mini" type="danger" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="page.pageSize"
            :total="PerTrainNum"
            @current-change="getAllMv"
          >
          </el-pagination>
        </div>
      </template>
    </div>

    <el-dialog
      title="增加"
      :visible.sync="PerTrainAddDialog"
      width="60%"
      center
    >
      <table>
        <tr>
          <td>
            <span>员工编号：</span>
            <el-input
              v-model="addEmployeetrain.eid"
              placeholder="请输入内容"
              style="width: 220px"
            ></el-input>
          </td>
          <td>
            <span>培训内容：</span>
            <el-input
              v-model="addEmployeetrain.trainContent"
              placeholder="请输入内容"
              style="width: 220px"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>
            <span>培训备注：</span>
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="addEmployeetrain.remark"
              maxlength="20"
              show-word-limit
              style="width: 220px"
            >
            </el-input>
          </td>
          <td>
            <span>培训日期：</span>
            <el-date-picker
              v-model="addEmployeetrain.trainDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </td>
        </tr>
      </table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="PerTrainAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="addPerTrain()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="PerTrainDialog" width="60%" center>
      <el-row :gutter="10">
        <el-col :span="8">
          <span>培训内容：</span>
          <el-input
            v-model="editEmployeeTrain.trainContent"
            placeholder="请输入内容"
            style="width: 220px"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <span>培训备注：</span>
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="editEmployeeTrain.remark"
            maxlength="20"
            show-word-limit
            style="width: 220px"
          >
          </el-input>
        </el-col>
        <el-col :span="8">
          <span>培训日期：</span>
          <el-date-picker
            v-model="editEmployeeTrain.trainDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="PerTrainDialog = false">取 消</el-button>
        <el-button type="primary" @click="editPerTrain()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PerTrain",
  data() {
    return {
      searchText: "",
      employeetrain: [],
      PerTrainDialog: false,
      PerTrainAddDialog: false,
      editEmployeeTrain: {
        id: "",
        trainDate: "",
        trainContent: "",
        remark: "",
      },
      addEmployeetrain: {
        trainDate: "",
        trainContent: "",
        remark: "",
      },
      page: {
        pageNum: 1,
        pageSize: 4,
      },
      PerTrainNum: 0,
    };
  },
  created() {
    this.getAllMv(1);
  },
  methods: {
    getAllMv(currentNum) {
      currentNum ? (this.page.pageNum = currentNum) : "";
      this.$axios
        .get(
          `employeeTrain/?pageNum=${this.page.pageNum}&pageSize=${this.page.pageSize}&name=${this.searchText}`
        )
        .then((value) => {
          this.employeetrain = value.data.list;
          this.PerTrainNum = value.data.total;
        })
        .catch((value) => {
          console.error(value);
        });
    },
    handleEdit(index, row) {
      this.PerTrainDialog = true;
      this.editEmployeeTrain = row;
    },
    editPerTrain() {
      this.$axios
        .post(
          "employeeTrain/",
          this.$qs.stringify({
            id: this.editEmployeeTrain.id,
            eid: this.editEmployeeTrain.eid,
            trainDate: this.editEmployeeTrain.trainDate,
            trainContent: this.editEmployeeTrain.trainContent,
            remark: this.editEmployeeTrain.remark,
          })
        )
        .then((value) => {
          if (value.data > 0) {
            this.$message({
              showClose: true,
              message: "编辑成功",
              type: "success",
            });
            this.getAllMv(this.page.pageNum);
          } else {
            this.$message({
              showClose: true,
              message: "编辑失败",
              type: "error",
            });
          }
        })
        .catch((value) => {
          console.error(value);
        });
      this.PerTrainDialog = false;
    },

    addPerTrain() {
      this.$axios
        .put("employeeTrain/", this.$qs.stringify(this.addEmployeetrain))
        .then((value) => {
          if (value.data == 1) {
            this.$message({
              showClose: true,
              message: "增加成功",
              type: "success",
            });
            this.getAllMv(1);
          } else {
            this.$message({
              showClose: true,
              message: "增加失败",
              type: "error",
            });
          }
        })
        .catch((value) => {
          console.error(value);
        });
    },
    handleDelete(index, row) {
      this.$axios
        .delete("employeeTrain/", { params: { id: row.id } })
        .then((value) => {
          if (value.data == 1) {
            this.$message({
              showClose: true,
              message: "删除成功",
              type: "warning",
            });
            this.getAllMv(this.page.pageNum);
          } else {
            this.$message({
              showClose: true,
              message: "删除失败",
              type: "error",
            });
          }
        })
        .catch((value) => {
          console.error(value);
        });
    },
  },
};
</script>

<style>
.PerTrain-head {
  margin-bottom: 20px;
}
.PerTrain-main {
  text-align: center;
}
</style>